import { apigetDetail, apiAttention } from '../../api'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Card, Input, Button, Comment, Tooltip, Avatar, List } from 'antd'
import io from 'socket.io-client'
import { useSelector } from 'react-redux'
import { StoreType, UserInfoType } from '../../interface'
import Moment from 'moment'
import { getUserInfo } from '../../utils'

Moment.locale('zh-cn'); // 默认的语言环境为英语。


const socket = io('http://127.0.0.1:7001/io')

const Detail = () => {

    const params = useParams()

    const [detail, setDetail]: any = useState({})

    const [value, setValue] = useState('')

    const [commentList, setCommentList] = useState([])

    const userInfo = useSelector((state: StoreType) => {
        return state.userInfo as UserInfoType
    })


    useEffect(() => {
        getDetail()

        // 测试连接socket
        socket.on('connect', () => {
            console.log('连接成功')
        })

        socket.on('res', (data: any) => {
            const newArr = data.map((item: any) => {
                return {
                    ...item,
                    date: Moment(item.date).from(new Date().getTime())
                }
            })

            setCommentList(newArr.reverse())
        })

        // 只对自己广播
        socket.emit('getcomentList', { id: params.id })


    }, [])

    const getDetail = () => {
        apigetDetail({ id: params.id as string }).then(res => {
            setDetail(res.data)
        })
    }

    // 评论发生
    const send = () => {
        const data = {
            value,
            id: params.id, // 被评论的文章id
            userid: userInfo.id
        }
        socket.emit('chat', data)
    }

    // 关注
    const attention = () => {
        apiAttention({ userid: detail.userid, id: userInfo.id }).then(res => {
            getUserInfo()
        })
    }

    return <div className="detail-box">
        <Card title="作者信息">
            <p>作者名称：{detail.username}</p>
            <p>是否关注：<Button type="link" onClick={attention}>{
                userInfo.likes.split(',').indexOf(detail.userid + '') != -1 ? '已关注' : '关注'
            }</Button></p>

        </Card>
        <div className="detail-info">
            <h2>{detail.title}</h2>
            <div dangerouslySetInnerHTML={{ __html: detail.html }} />
        </div>

        <Card title="评论">
            <Card title="请写下你的评论">
                <Input value={value} onChange={e => setValue(e.target.value)} />
                <Button onClick={send}>发送</Button>
            </Card>

            <List
                dataSource={commentList}
                renderItem={(item: any) => (
                    <li>
                        <Comment
                            author={item.username}
                            avatar={item.img}
                            content={item.content}
                            datetime={item.date}
                        />
                    </li>
                )}
            >

            </List>

        </Card>


    </div>
}

export default Detail